<template>
  <div class="fillcontain">
    <div class="filter-container">
      <el-input placeholder="操作人" v-model="listQuery.operator"></el-input>
      <el-select
        clearable
        v-model="listQuery.msg_category_type"
        placeholder="消息类型"
      >
        <el-option value="1" label="系统通知"></el-option>
        <el-option value="25" label="活动公告"></el-option>
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="daterangeChanged"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="daterangePickerOptions"
      >
      </el-date-picker>

      <el-button type="primary" @click="handleFilter">查询</el-button>

      <el-button type="primary" @click="handleAdd">添加</el-button>
    </div>

    <div class="app-container calendar-list-container">
      <el-table
        id="table"
        :data="list"
        border
        fit
        highlight-current-row
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="通知标题" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.topic }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="通知时间" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.send_time | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="消息类型">
          <template slot-scope="{ row }">
            <span>{{ row.msg_category_type | msg_category_type }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="通知类型" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.send_type | sendType }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="设备">
          <template slot-scope="scope">
            <span>{{ scope.row.device_type | device_type }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="版本">
          <template slot-scope="scope">
            <span>{{ scope.row.app_version }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="渠道" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.app_channel }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="ID" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.uids }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="内容" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.message }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="图片" min-width="150">
          <template slot-scope="scope">
            <span
              ><img v-if="scope.row.image" :src="scope.row.image | imgUrl"
            /></span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="跳转链接" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.url }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作时间" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.update_time | parseTime }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作人">
          <template slot-scope="scope">
            <span>{{ scope.row.operator }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" min-width="150">
          <template slot-scope="scope">
            <span>
              <el-button
                size="small"
                type="primary"
                :disabled="scope.row.state == '1'"
                @click="handleEdit(scope.row)"
                >编辑
              </el-button>
              <el-button
                size="small"
                type="primary"
                @click="handleDelete(scope.row)"
                >删除
              </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    >
    </TablePagination>

    <el-dialog :title="operationFormTitle" :visible.sync="operationFormVisible">
      <el-form
        class="small-space"
        :model="operationInfo"
        label-position="left"
        label-width="90px"
        ref="operationInfo"
        :rules="rules"
      >
        <el-form-item label="通知标题" prop="topic">
          <el-input v-model="operationInfo.topic"></el-input>
        </el-form-item>
        <el-form-item label="通知时间" prop="send_time">
          <el-date-picker
            v-model="operationInfo.send_time"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="消息类型" prop="msg_category_type">
          <el-radio-group v-model="operationInfo.msg_category_type">
            <el-radio :label="1">系统通知</el-radio>
            <el-radio :label="25">活动公告</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="通知类型" prop="send_type">
          <el-radio-group v-model="operationInfo.send_type">
            <el-radio :label="2">所有用户</el-radio>
            <el-radio :label="1">指定设备</el-radio>
            <el-radio :label="3">渠道版本</el-radio>
            <el-radio :label="0">指定ID</el-radio>
            <el-radio :label="4">指定分组</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="设备"
          prop="device_type"
          v-if="operationInfo.send_type == '1'"
        >
          <el-select v-model="operationInfo.device_type">
            <el-option
              v-for="item in deviceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <template v-if="operationInfo.send_type == '3'">
          <el-form-item label="版本" prop="app_version">
            <el-select v-model="operationInfo.app_version">
              <el-option
                v-for="item in versionOptions"
                :key="item.id"
                :label="item.text"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="渠道" prop="app_channel">
            <el-select v-model="operationInfo.app_channel">
              <el-option
                v-for="item in channelOptions"
                :key="item.channel_id"
                :label="item.text"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item
          v-if="operationInfo.send_type == '0'"
          label="ID(以,分隔)"
          prop="uids"
        >
          <el-input type="textarea" v-model="operationInfo.uids"></el-input>
          (最多200个)
        </el-form-item>
        <el-form-item
          label="选择分组"
          prop="receive_group"
          v-if="operationInfo.send_type == '4'"
        >
          <el-select v-model="operationInfo.user_group">
            <el-option
              v-for="item in user_groups"
              :key="item.level_id"
              :label="item.level_name"
              :value="item.level_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息内容" prop="message">
          <el-input type="textarea" v-model="operationInfo.message"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image" ref="icon">
          <UploadFile
            type="image"
            @onSuccess="uploadSuccess"
            :img-list="operationInfo.image"
          />
        </el-form-item>
        <el-form-item label="链接" prop="url">
          <el-input v-model="operationInfo.url"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="operationFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="confirm"
          :loading="submitDisabled"
          :disabled="submitDisabled"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DATEPICKER_OPTIONS from "@/config/datepickerOptions";
import { parseTime } from "@/filters/index";
import TablePagination from "@/components/TablePagination";
import UploadFile from "@/components/UploadFile";
export default {
  name: "activeUserList",
  components: { TablePagination, UploadFile },
  data() {
    return {
      list: null,
      total: null,
      listLoading: false,
      listQuery: {
        offset: 0,
        limit: 20,
        startTime: "",
        endTime: "",
      },
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: "",
      operationFormVisible: false,
      operationInfo: {
        send_type: 2,
        msg_category_type: 1,
      },
      channelOptions: [],
      versionOptions: [],
      deviceOptions: [
        {
          label: "其他",
          value: 0,
        },
        {
          label: "Android",
          value: 1,
        },
        {
          label: "IOS",
          value: 2,
        },
      ],
      user_groups: [],
      rules: {
        message: [{ required: true, message: "不能为空", trigger: "change" }],
        topic: [{ required: true, message: "不能为空", trigger: "change" }],
        msg_category_type: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
      },
      operationFormTitle: "添加系统消息",
      isEdit: false,
      submitDisabled: false,
    };
  },
  filters: {
    msg_category_type(val) {
      let obj = {
        1: "系统通知",
        25: "活动公告",
      };
      return obj[val];
    },
    sendType(value) {
      let obj = {
        0: "按照账号发送",
        1: "按照系统发送",
        2: "全部发送",
        3: "按照渠道版本发送",
      };
      return obj[value];
    },
    device_type(value) {
      let obj = {
        0: "其他",
        1: "Android",
        2: "IOS",
      };
      return obj[value];
    },
  },
  created() {
    this.xhrGetUserGroups().then((resp) => {
      this.user_groups = resp;
    });
    this.getAppInfo();
    this.getList();
  },
  methods: {
    getAppInfo() {
      this.getConfigInfo().then((data) => {
        this.channelOptions = data._channel;
        this.versionOptions = data._version;
      });
    },
    getList() {
      this.listLoading = true;
      this.$get("message/config", this.listQuery).then((resp) => {
        this.list = resp.data.config_list;
        this.total = resp.data.count;
        this.listLoading = false;
      });
    },
    //添加
    handleAdd() {
      this.operationFormTitle = "添加系统消息";
      this.isEdit = false;
      this.operationFormVisible = true;
      this.operationInfo = { send_type: 2, image: null, msg_category_type: 1 };
    },
    uploadSuccess(file) {
      this.operationInfo.image = [{ url: file[0].name.toString() }];
    },
    uploadFailed(err, file, fileList) {
      this.$message({
        message: err.message,
        type: "error",
      });
    },
    //编辑
    handleEdit(row) {
      this.operationFormTitle = "编辑系统消息";
      this.isEdit = true;
      this.operationFormVisible = true;
      this.operationInfo = Object.assign({}, row);
    },
    //删除系统消息
    handleDelete(row) {
      this.$alert("确定删除该消息吗", "删除确认", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.$del("message/config/" + row.config_id).then((resp) => {
              if (resp.message == "OK") {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.getList();
              } else {
                this.$message({
                  message: "操作失败",
                  type: "error",
                });
              }
            });
          }
        },
      });
    },
    confirm() {
      this.$refs.operationInfo.validate((valid) => {
        if (valid) {
          this.submitDisabled = true;
          let method = this.isEdit ? "$put" : "$post";
          let params = Object.assign({}, this.operationInfo);
          if (this.operationInfo.image && this.operationInfo.image.length) {
            params.image = this.operationInfo.image[0].url;
          }
          let url = this.isEdit
            ? "message/config/" + this.operationInfo.config_id
            : "message/config";
          this[method](url, params)
            .then((resp) => {
              if (resp) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.operationFormVisible = false;
                this.getList();
                this.submitDisabled = false;
              }
            })
            .catch((err) => {
              this.$message({
                message: err.data.error.description,
                type: "error",
              });
              this.submitDisabled = false;
            });
        }
      });
    },
  },
};
</script>
<style>
.el-table td.do-wrap .cell {
  text-overflow: inherit !important;
  white-space: normal !important;
}
</style>
